<template>
	<view>
		<view class="tab-page" :style="'height:' + WindowHeight + 'px'">
			<Community v-if="selected == 0"></Community>
			<More v-if="selected == 1"></More>
			<Photo v-if="selected == 2"></Photo>
			<Mine v-if="selected == 3"></Mine>
		</view>
		<view class="tab-bar" :style="'height:' + CustomBar + 'px'">
			<view class="tab-bar-border"></view>
			<view v-for="(item, index) in list" class="tab-bar-item" :data-path="item.pagePath" :data-index="index"
				@click="switchTab">
				<image :class="'tab-bar-icon tab-bar-icon-img ' + [selected === index ? 'tab-bar-icon-img-click' : '']"
					:src="item.iconPath"></image>
				<view :style="'color:' + [selected === index ? '#F56991':'#7A7E83']"
					:class="'tab-bar-icon tab-bar-icon-text ' + [selected === index ? 'tab-bar-icon-text-click' : '']">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Community from '@/components/community/community.vue'; //1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
	import Mine from '@/components/mine/mine.vue';
	import More from '@/components/more/more.vue';
	import Photo from '@/components/photo/photo.vue';
	export default {
		name: "custom",
		components: {
			Community,
			Mine,
			More,
			Photo
		}, //2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步） 
		data() {
			return {
				CustomBar: '',
				WindowHeight: '',
				extraClasses: "",
				selected: 0,
				color: "#7A7E83",
				selectedColor: "#3cc51f",
				list: [{
					id: "community",
					pagePath: "/components/community/community",
					iconPath: "/static/image/icon/icon_community.png",
					text: "社区"
				}, {
					id: "more",
					pagePath: "/components/more/more",
					iconPath: "/static/image/icon/icon_more.png",
					text: "发现"
				}, {
					id: "photo",
					pagePath: "/components/photo/photo",
					iconPath: "/static/image/icon/icon_photo.png",
					text: "相册"
				}, {
					id: "mine",
					pagePath: "/components/mine/mine",
					iconPath: "/static/image/icon/icon_mine.png",
					text: "我们"
				}]
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.StatusBar = res.statusBarHeight;

					let custom = wx.getMenuButtonBoundingClientRect();
					that.Custom = custom;
					that.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
					that.WindowHeight = res.windowHeight - that.CustomBar;
				}
			});
		},
		methods: {
			switchTab(e) {
				let that = this;
				const data = e.currentTarget.dataset
				const url = data.path

				that.selected = data.index
			}
		}
	}
</script>

<style>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 48px;
		background: white;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-bar-border {
		background-color: rgba(0, 0, 0, 0);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		transform: scaleY(0.5);
	}

	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.tab-bar-item image {
		width: 27px;
		height: 27px;
	}

	.tab-bar-item view {
		font-size: 14px;
		font-weight: bold;
	}

	.tab-bar-icon {
		transition: all 0.3s;
	}

	.tab-bar-icon-img {
		position: absolute;
		opacity: 1;
	}

	.tab-bar-icon-text {
		position: absolute;
		opacity: 0;
		margin-top: 40rpx;
	}

	.tab-bar-icon-img-click {
		opacity: 0;
		margin-bottom: 40rpx;
	}

	.tab-bar-icon-text-click {
		opacity: 1;
		margin-top: 0rpx;
	}
</style>